{% extends "home/base.html" %}
{% block time_hot %} class="active" {% endblock %}
{% block page_title %} 时间热度 {% endblock %}
{% block content %}
     <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title">旅游景点类型饼图展示</h6>
            </div>
            <!-- 引入 echarts 主库 -->
            <div class="card-body">
                <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
                <div id="hot_type_pix" style="width:100%;height:600px"></div>
                <script>
                    var chartDom = document.getElementById('hot_type_pix');
                    var to_se_data = {{ to_se_data1|safe }};
                    var myChart = echarts.init(chartDom, 'light');
                    var option;

                    option = {
    title: {
        text: '景点类别饼图展示',
        left: 'center',
        textStyle: {
            fontSize: 24,
            fontWeight: 600,
            color: '#333' // 标题颜色
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        top: 'middle', // 修改legend的位置
        itemGap: 20, // 调整每项之间的间隔
        itemWidth: 20, // 调整图例的宽度
        itemHeight: 10 // 调整图例的高度
    },
    series: [
        {
            name: '类别',
            type: 'pie',
            radius: '55%', // 增大或减小半径
            color: ['#FF6B6B', '#FFA52A'], // 定义饼图的颜色列表
            center: ['50%', '50%'], // 调整饼图的中心位置
            data: to_se_data.pix_data,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                }
            },
            label: { // 饼图标签的样式
                normal: {
                    formatter: '{b}:\n{d}%',
                    position: 'inner', // 标签位置在饼图内部
                    show: true,
                    fontSize: 14,
                    fontWeight: 400,
                    color: '#fff' // 标签颜色
                }
            },
            labelLine: { // 标签线的样式
                normal: {
                    show: true,
                    lineStyle: {
                        color: '#fff', // 线颜色
                        width: 1,
                        type: 'solid'
                    }
                }
            }
        }
    ]
};


                    option && myChart.setOption(option);
                </script>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title">时间热度柱图展示</h6>
            </div>
            <!-- 引入 echarts 主库 -->
            <div class="card-body">
                <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
                <div id="hot_time" style="width:100%;height:600px"></div>
                <script>
                    var chartDom = document.getElementById('hot_time');
                    var to_se_data = {{ to_se_data|safe }};
                    var myChart = echarts.init(chartDom, 'light');
                    var option;

                    option = {
                        xAxis: {
                            type: 'category',
                            data: to_se_data.xdata,
                        },
                        yAxis: {
                            type: 'value'
                        },
                        tooltip: {
                            trigger: 'axis', // 触发类型，可选为：'item'（数据项图形触发），'axis'（坐标轴触发）
                            axisPointer: {
                                type: 'shadow' // 指示器类型，'shadow' 为阴影指示器
                            }
                        },
                        series: [
                            {
                                data: to_se_data.ydata,
                                type: 'bar'
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                </script>
            </div>
        </div>
    </div>
    <br>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title">时间热度饼图展示</h6>
            </div>
            <!-- 引入 echarts 主库 -->
            <div class="card-body">
                <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
                <div id="hot_time_pix" style="width:100%;height:600px"></div>
                <script>
                    var chartDom = document.getElementById('hot_time_pix');
                    var to_se_data = {{ to_se_data|safe }};
                    var myChart = echarts.init(chartDom, 'light');
                    var option;

                    option = {
                        title: {
                            text: '时间热度饼图展示',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '日期',
                                type: 'pie',
                                radius: '50%',
                                data: to_se_data.pix_data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                </script>
            </div>
        </div>
    </div>

{% endblock %}